<template>
  <div class="box">
    <div ref="vantaRef" style="width: 100%; height: 300px"></div>
    <div class="banner">
      <h1>重塑自我</h1>
      <h1>挑战极限</h1>
      <h6>
        &ensp;&ensp;CHONG&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;SU&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;ZI
        &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;WO
        &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;TIAO
        &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;ZHAN&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;JI
        &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;XIAN
      </h6>
      <h2>欢迎进入健身房管理系统后台！</h2>
    </div>
  </div>
</template>

<script>
import * as THREE from "three";
import FOG from "vanta/src/vanta.fog";

export default {
  name: "Index",
  data() {
    return {};
  },
  mounted() {
    this.vantaEffect = FOG({
      el: this.$refs.vantaRef,
      THREE: THREE,
    });
    VANTA.FOG({
      el: this.$refs.vantaRef,
      /*以下为样式配置*/
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 656.0,
      minWidth: 656.0,
      highlightColor: 0xffc300,
      midtoneColor: 0xff1f00,
      lowlightColor: 0x2d00ff,
      baseColor: 0xffebeb,
      blurFactor: 0.6,
      speed: 1.6,
      zoom: 1,
    });
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy();
    }
  },
};
</script>

<style lang="less" scoped>
.box {
  position: relative;
  .banner {
    z-index: 999;
    position: absolute;
    top: 80%;
    left: 24%;
    color: #fff;
  }
}
h1 {
  font-size: 66px;
  display: inline-block;
  margin-right: 50px;
  letter-spacing: 5px;
}
h2 {
  font-size: 25px;
  letter-spacing: 5px;
  margin-top: 20px;
  margin-left: 105px;
}
p {
  margin-top: 60px;
  font-size: 18px;
}
</style>
